<template>
  <div class="dashboard-container" style="font-size: 30px;">
    {{ msg }}
    <hr>
    <el-button style="margin-top: 12px;" @click="apply">申请信息</el-button>

    <el-dialog :visible.sync="dialogVisible" width="500px" :title="title" append-to-body>
      <el-steps :active="active" align-center style="margin-bottom: 60px">
        <el-step title="员工信息"></el-step>
        <el-step title="账户信息"></el-step>
      </el-steps>
      <el-form  :model="formData" label-width="80px">
        <div v-if="active === 0">
          <el-form-item label="员工名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入员工全名" clearable />
          </el-form-item>
          <el-form-item label="员工性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="员工地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入详细地址" clearable />
          </el-form-item>
          <el-form-item label="员工手机" prop="iphone">
            <el-input v-model="formData.iphone" placeholder="请输入11位手机号" maxlength="11" clearable />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select
              v-model="formData.departmentId"
              placeholder="请选择部门"
              filterable
              style="width:100%"
            >
              <el-option
                v-for="dept in departmentOptions"
                :key="dept.id"
                :label="dept.name"
                :value="dept.id"
              />
            </el-select>
          </el-form-item>
        </div>

        <div v-else>
          <el-form-item label="登录账号" prop="userName">
            <el-input
              v-model="formData.userName"
              placeholder="请输入用户名"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="6-20位字符"
              type="password"
              show-password
              clearable
            />
          </el-form-item>
          <el-form-item label="用户权限" prop="role">
            <el-select v-model="formData.role" placeholder="请选择用户角色">
              <el-option label="普通员工" value="staff"></el-option>
              <el-option label="部门主管" value="manager"></el-option>
              <el-option label="系统管理员" value="admin"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>

      <div style="text-align: center; margin-top: 30px">
        <el-button
          @click="prevStep"
          :disabled="active === 0"
        >
          上一步
        </el-button>

        <el-button
          type="primary"
          @click="nextStep"
          :disabled="active === 1"
        > 下一步
        </el-button>
        <el-button
          type="primary"
          @click="submitForm"
        > 提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      msg: '员工信息管理',
      dialogVisible: false,
      active: 0,
      title: '员工信息申请',
      // 统一表单数据结构
      formData: {
        name: '',
        sex: '',
        address: '',
        iphone: '',
        departmentId: '',
        userName: '',
        password: '',
        role: 'staff'
      },
      // 性别选项
      sexOptions: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '其他', value: 'other' }
      ],
      // 模拟部门数据
      departmentOptions: [
        { id: 1, name: '技术研发部' },
        { id: 2, name: '市场营销部' },
        { id: 3, name: '人力资源部' },
        { id: 4, name: '财务管理部' },
        { id: 5, name: '客户服务部' }
      ]
    };
  },
  methods: {
    apply() {
      this.dialogVisible = true;
      // 重置表单状态
      this.active = 0;
      // 重置表单数据
      this.resetForm();
    },

    resetForm() {
      this.formData = {
        name: '',
        sex: '',
        address: '',
        iphone: '',
        departmentId: '',
        userName: '',
        password: '',
        role: 'staff'
      };
    },

    prevStep() {
      if (this.active > 0) this.active--;
    },

    nextStep() {
      this.active = 1;
      this.title = '账户信息设置';
    },
    submitForm() {
      // 这里应该是API请求
      console.log('提交数据++++++++++++>:', this.formData);
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 30px;

  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

    .el-form-item {
      margin-bottom: 22px;
    }

    .el-step__title {
      font-size: 14px;
    }
  }
}
</style>
